<!DOCTYPE html>
<html>
<head>
  <title>登录界面</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Bootstrap JS -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        text-align: center;
        overflow: hidden; /* 隐藏滚动条 */
      }
      .error-message {
        color: red;
      }
      .center-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f4;
      }

      .login-box {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
      }

      .login-form {
        flex: 1;
        padding: 0 20px;
      }

      .login-image {
        flex: 1;
        padding: 0 20px;
      }

      .login-image img {
        width: 100%;
        height: auto;
      }
    </style>
</head>
<body>
<header class="fixed-top p-2 bg-dark text-white">
  <h4>个人账单管理系统</h4>
</header>
<div class="container">
  <div class="center-container">
    <div class="login-box">
      <div class="login-image">
        <!-- 左侧图片 -->
        <img src="../static/login.webp" alt="Left Image">
      </div>
      <div class="login-form">
        <!-- 右侧登录表单 -->
        <h2>登录</h2>
        <form>
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" name="username" id="username" placeholder="用户名" required>
            <div class="invalid-feedback">
              请输入用户名.
            </div>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
            <div class="invalid-feedback">
              请输入密码.
            </div>
          </div>
          <div class="form-group" id="imgCode">
            <label for="code">验证码</label>
            <div class="input-group">
              <input type="text" class="form-control" name="code" id="code" placeholder="验证码" aria-label="验证码" aria-describedby="basic-addon2" required>
              <div class="input-group-append">
                <img id="captchaImage" src="/User/getCode" class="input-group-text" onclick="refreshCaptcha()">
              </div>
              <div class="invalid-feedback">
                请输入验证码.
              </div>
            </div>
          </div>
          <button type="submit" class="btn btn-primary">登录</button>
        </form>
        <p id="errorMessage" class="error-message"></p>
        <a href="/page/toregister">新用户？立即注册</a>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid fixed-bottom" style="text-align: center; background-color: black;">
  <div class="row">
    <div class="col-sm-12 text-white">
      <small>© Copyright <b>MSoft. All Rights Reserved</b><br />
        <b>Designed by NIIT</b>
      </small>
    </div>
  </div>
</div>
<script>
  document.querySelector('form').addEventListener('submit', async function (event) {
    event.preventDefault();
    let username = document.querySelector('input[name="username"]').value;
    let password = document.querySelector('input[name="password"]').value;
    let code = document.querySelector('input[name="code"]').value;


    try {
      const response = await axios.post('/User/login', {
        username: username,
        password: password,
        code: code
      });

      if (response.data.code === 1) {
        localStorage.setItem("token", response.data.data);

        window.location.href = '/Bill/byConditions?pageNum=1&typeid=0&title=&remark=&billtime=null'; // Redirect to list.html if login is successful
      } else {
        document.getElementById("errorMessage").textContent =   response.data.msg;
      }
    } catch (error) {
      console.error('Error during login:', error);
      document.getElementById("errorMessage").textContent =   error.message;
    }
  });

  function refreshCaptcha() {
    var image = document.getElementById('captchaImage');
    image.src = "/User/getCode?" + new Date().getTime(); // 在URL后加上随机参数，确保每次加载都是新的验证码图像
  }
</script>
</body>
</html>



